<template>
  <div :class="classes">
    <span v-if="hasSlot" :class="slotClasses">
      <slot></slot>
    </span>
  </div>
</template>

<script setup>
import { oneOf } from '../../utils/assist'
import { defineProps, computed, useSlots,unref } from 'vue'
const prefixCls = 'haloe-divider'

const props = defineProps({
  type: {
    type: String,
    validator(value) {
      return oneOf(value, ['horizontal', 'vertical'])
    },
    default: 'horizontal',
  },
  orientation: {
    type: String,
    validator(value) {
      return oneOf(value, ['left', 'right', 'center'])
    },
    default: 'center',
  },
  dashed: {
    type: Boolean,
    default: false,
  },
  size: {
    validator(value) {
      return oneOf(value, ['small', 'default'])
    },
    default: 'default',
  },
  plain: {
    type: Boolean,
    default: false,
  },
})

const slot = useSlots()
const hasSlot = computed(() => {
  return !!slot.default
})

const classes = computed(() => {
  return [
    `${prefixCls}`,
    `${prefixCls}-${props.type}`,
    `${prefixCls}-${props.size}`,
    {
      [`${prefixCls}-with-text`]: props.hasSlot && props.orientation === 'center',
      [`${prefixCls}-with-text-${props.orientation}`]: unref(hasSlot),
      [`${prefixCls}-dashed`]: !!props.dashed,
      [`${prefixCls}-plain`]: props.plain,
    },
  ]
})

const slotClasses=computed(()=>{
  return [
    `${prefixCls}-inner-text`,
  ]
})
</script>

<style></style>
